{extend name="base2" /}

{block name="body"}
<style>
    .contain{
        width:100%;
    }
    #masonry{
        width:calc(100% - 40px) !important;
    }
    .container-fluid .box img{
        border:none;
    }
    .container-fluid .box{
        border:1px solid #ccc;
    }


</style>
<div style="margin-top:5px;">
    <img src="/static/images/banner.jpg" alt="">
</div>
<div class="contain">

    {if condition="session('index_id')"}
    <div id="masonry" class="container-fluid masonry">
        {foreach name="$list" item="vo"}
        <div class="box" style="font-size:0;width:calc(100% / {if condition="count($vo['path']) eq 1"} 5 {else /} 3 {/if} - 42px);">
            <h4 style="font-size:18px;color:#666;" class="on">标题：{$vo.title}</h4>
            <hr />
            {foreach name="$vo['path']" item="suit_img"}
                <img style="width:calc(100% / {$vo['path']|count} - 10px);padding:5px;" src="{$suit_img}" alt="">
            {/foreach}
        </div>
        {/foreach}
    </div>
    {else /}
    <div id="masonry" class="container-fluid masonry">
        {foreach name="$list" item="vo"}
        <div class="box" style="font-size:0;width:calc(100% / {if condition="count($vo['thumb']) eq 1"} 5 {else /} 3 {/if} - 42px);">
            <h4 style="font-size:18px;color:#666;" class="on">标题：{$vo.title}</h4>
            <hr />
            {foreach name="$vo['thumb']" item="suit_img"}
                <img style="width:calc(100% / {$vo['thumb']|count} - 10px);padding:5px;" src="{$suit_img}" alt="">
            {/foreach}
        </div>
        {/foreach}
    </div>
    {/if}

</div>
{/block}

{block name="script"}
<script>
    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.box',
                columnWidth : 15 ,//一列的宽度 ，包括边距 220+10+10  
                gutter: 25,
                isAnimated: true,
                isFitWidth: true,
            });
        });
    });
</script>
{/block}
